<template>
    <div class="app">
        <!--<div class="search">-->
            <!--<input type="search"  placeholder="请输入">-->
            <!--<div class="btn">-->
                <!--<img src="/static/images/search.png"/>-->
            <!--</div>-->
        <!--</div>-->
        <div class="title">
            <text>发现</text>
        </div>
        <swiper class='slide' autoplay="true" interval='5000' indicator-dots='true'>
            <swiper-item v-for="(item,index) in slide_list" :key="index">
                <image class='slide-image' :src="resurl+item.pic+'?x-oss-process=image/resize,m_fill,w_750,h_300'"
                       mode="aspectFill"/>
            </swiper-item>
        </swiper>
        <div class="list">
            <div class="list_title">
                <text class="title" v-for="(item,index) in list"  :key="index" @click="chengtab(item.id)" :class="item.id ==id?'activate':''">{{item.name}}</text>
                <a :href="'/pages/shop/shop_list/main'"  class="more">更多</a>
                <img src="/static/images/qianjin.png" alt="">
            </div>
            <scroll-view scroll-x='true'>
                <div class="list">
                    <a class="item" :href="'/pages/shop/detail/main?goods_id='+item.id" v-for="(item,index) in goods_list" :key="index">
                        <div class="image">
                            <img :src="resurl+item.pic+'?x-oss-process=image/resize,m_fill,w_500,h_360'" alt="">
                            <div>{{item.name}}</div>
                            <text>￥{{item.price}}</text>
                        </div>
                    </a>
                </div>
            </scroll-view>
        </div>
    </div>
</template>

<script>
    var that = null
    export default {
        data() {
            return this.datainit({
                slide_list:[],
                list:[],
                goods_list:[],
                id:1
            })
        },
        onShow() {
            that = this
            that.check()
        },
        methods: {
            init(){
                that.$post("shop/cate/shop_slide",null,function(list){
                    that.slide_list = list
                })
                that.shop_list()
                that.goods_lists()
            },
            shop_list:function(){
                that.$post("shop/cate/lists",null,function(list){
                    that.list = list
                })
            },
            goods_lists:function(){
                that.$post("shop/cate/lists_goods",{cate_id:that.id},function(list){
                    that.goods_list = list
                })
            },
            chengtab:function(_id){
                that.id = _id
                that.goods_lists()
            }
        }

    }
</script>

<style scoped lang="less">
    .search {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border-left: 10px solid #FFF;
        border-right: 10px solid #FFF;
        background: #FFF;
        height: 50px;
        padding-top: 5px;
        display: flex;

        input {
            flex: 1;
            border-radius: 5px;
            border: 1px solid #CCC;
            height: 38px;
        }

        .btn {
            display: block;
            width: 50px;
            height: 40px;

            img {
                position: relative;
                display: block;
                width: 30px;
                height: 30px;
                margin: auto;
                margin-top: 5px;
            }
        }
    }
    .title{
        width:100%;
        height:40px;
        line-height: 40px;
        position:relative;
        text{
            position: absolute;
            left:10px;
            font-size: 18px;
            font-weight: bold;
            color: #ff6600;
        }
    }
    .slide {
        position: relative;
        width: 100%;
        height: 200px;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .list{
        width:100%;
        .list_title{
            width:100%;
            height:40px;
            line-height: 40px;
            position:relative;

            .activate{
                background: #ff6600;
                color: #fff;
                padding: 5px;
                border-radius: 10px;
            }
            .title{
                margin: 10px;
                font-size: 16px;
            }
            .more{
                position: absolute;
                right:20px;
                font-size: 14px;
                color: #999;
                display: inline-block;
            }
            img{
                width:15px;
                height:15px;
                position: absolute;
                right:5px;
                top:13px;
            }

        }
        .list{
            height: 200px;
            /*overflow: hidden;*/
            background: #fff;
            position: relative;
            .item{
                width: 120px;
                margin-left: 2px;
                /* margin: 10rpx; */
                height: 200px;
                position: relative;
                float: left;
                border-bottom: 1px solid #ccc;
                background: #fff;
                .image{
                    width:120px;
                    height: 140px;
                    margin-left: 5px;
                    margin-top: 5px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    text{
                        color: #ff6600;
                    }
                }
            }
        }
    }


</style>
